<template>
  <view class="shareP">
    <u-navbar :is-back="true" title="我的员工" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view
          @click="yuanRuleM"
          style="padding: 0rem 0.5rem; display: flex; align-items: center"
        >
          <view
            style="
              font-size: 0.75rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #02af74;
            "
            >员工规则</view
          >
          <!-- <img style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>

    <div class="contentsP">
      <div v-if="showDatas.length == 0">
        <div style="padding: 5rem 0rem; text-align: center">
          <img
            style="width: 10rem; height: 10rem"
            src="../../../style/image/my/A28.png"
            alt=""
          />
          <div style="color: #999999; font-size: 0.65rem; padding: 2rem">
            当前暂无订单明细
          </div>
        </div>
      </div>
      <div
        @click="goDetailedM"
        class="items"
        v-else
        v-for="(item, index) in showDatas"
        :key="index"
      >
        <div class="person">
          <u-avatar :src="src" mode="circle"></u-avatar>
          <div class="text">
            <div>摸摸摸</div>
            <div>13454345688</div>
          </div>
        </div>

        <div class="content-bottom-right">
          <div style="display: flex; align-items: center; margin-right: 1rem">
            <img
              style="width: 0.8rem; height: 0.8rem; margin-right: 0.2rem"
              src="../../../style/image/order/edit.png"
              alt=""
            />
            <div class="bottom-text">编辑</div>
          </div>
          <div style="display: flex; align-items: center">
            <img
              style="width: 0.8rem; height: 0.8rem; margin-right: 0.2rem"
              src="../../../style/image/order/delete.png"
              alt=""
            />
            <div class="bottom-text" @click="deleteEmployee">删除</div>
          </div>
        </div>
      </div>

      <div></div>
    </div>

    <u-modal
      v-model="modalShow"
      :show-title="false"
      :show-cancel-button="true"
      :content="content"
    ></u-modal>

    <div   @click="addM" class="footP">
      <div
        style="padding: 0.7rem; display: flex; align-items: center"
      >
        <!-- <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <div
          style="
            color: white;
            margin-left: 0.2rem;
            display: flex;
            align-items: center;
          "
        >
          <img
            style="width: 1rem; margin-right: 0.2rem"
            src="../../../style/image/order/add.png"
            alt=""
          />
          <div>添加员工</div>
        </div>
      </div>
    </div>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public current = 0;

  public showDatas = [1, 21];
  public content = "确认删除员工";
  public modalShow = false;

  public showShareModal = false;
  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  tabsChange(index: any) {
    //    document.body.scrollTop = document.documentElement.scrollTop = 0;
    console.log(index);
    this.current = index;
    // this.swiperCurrent = index;
  }
  deleteEmployee() {
    console.log("删除");

    this.modalShow = true;
  }
  addM() {
    uni.navigateTo({
      url: "./addEmployee",
    });
  }

  yuanRuleM() {
    uni.navigateTo({
      url: "./employeeDetailed",
    });
  }
  logoTimeM() {
    console.log("changan");
    this.showShareModal = true;
  }

  goDetailedM() {
    console.log("1232131231");
    uni.navigateTo({
      url: "./message",
    });
  }
}
</script>

<style  scoped>
.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #f2f2f2;
}

.person {
  display: flex;
}

.content-bottom-right {
  display: flex;
}

.bottom-text {
  font-size: 0.68rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

.text {
  display: flex;
  flex-wrap: revert;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 0.5rem;
}
</style>